<template>
	<header>
		<p @click='toprop()'>{{title}}</p>
		<div>
			<ul>
				<li v-for="i in getDate">
					<span v-on:click="tonew(i.id,i.params)" :class="i.id==getId?'active':''">{{i.title}}</span>
				</li>
			</ul>
		</div>
	</header>
</template>

<style scoped>
.active{
	color: #1f9400;
	border-bottom: 2px solid #1f9400;
}
	header{
		position: absolute;
		top:0;
		height: 2.133333rem;
		width: 100%;
		z-index: 10;
	}
	header p{
		height: 1.173333rem;
		line-height: 1.173rem;
		font-size: 0.533333rem;
		text-indent: 0.8rem;
		color: white;
		background: #1f9400 url(./img/dv.png) no-repeat left center;
		background-size: auto 70%;
	}
	header div{
		overflow: auto;
	}
	/* 隐藏滚动条 */
	header div::-webkit-scrollbar{
		display: none;
	}
	ul{
	 white-space: nowrap;
	}
	li{
	display: inline-block;
	width:1.6rem;
	text-align: center;
	height:0.8rem;
	background: white;
	}
	li span {
		display: inline-block;
		height: 0.8rem;
		line-height: 0.8rem;
	}
</style>

<script>
 import {TransferDom,Popup} from 'vux'
	export default {
		data(){
			return {
				title:'懂球帝',
				nav:[],
				show:false
			}
		},
		methods:{
			toprop(){
				this.$store.commit('changeStatus');
			},
			tonew(id,params){
				this.request(id,params);
				this.$store.commit('getid',id);
			},
			request(id,params){
				this.$http({
					url:'/quanmin',
					params: {
						num: id,
						page:1
					}
				}).then(function(res){
					this.$store.commit('changeList',res.body.list.articles);
					console.log(res);
				});
				this.$http({
					url:'/jifen',
					params:{
						num:params
					}
				}).then(function(res){
					this.$store.commit('changejifenList',res.body[0]);
				})
			}
		},
		computed:{
			getId(){
				return this.$store.state.Id;
			},
			getDate(){
				return this.$store.state.navList;
			}
		},
		mounted(){
			this.tonew(1,'51');
		}
	}
</script>